<template>
  <div>
    <el-card>
      <template #header>
        <div class="flex justify-between">
          <span class="font-bold">电子健康档案上传情况</span>
          <span class="ml-4 font-bold text-[var(--el-color-primary)] cursor-pointer"
            @click="handleViewDetailBtn">查看详情</span>
        </div>
      </template>
      <div class="flex justify-around">
        <div class="box box-1">
          <div class="text-white text-[18px] font-bold">昨日已上传</div>
          <div class="text-white text-[32px] font-bold">
            {{ yesterdayInfo.repairUploadNum }}
          </div>
        </div>
        <div class="box box-2">
          <div class="text-white text-[18px] font-bold">昨日未上传</div>
          <div class="text-white text-[32px] font-bold">
            {{ yesterdayInfo.notRepairUploadNum }}
          </div>
        </div>
      </div>
    </el-card>
    <form-dialog ref="formDrawerRef" title="电子健康档案上传详情" width="90%" top="2vh" :isButton="false">
      <div class="dialog-body">
        <el-form ref="formRef" :model="searchForm" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="上传时间" prop="time">
                <el-date-picker v-model="searchForm.time" type="daterange" start-placeholder="开始时间"
                  end-placeholder="结束时间" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="上传状态" prop="isUpload">
                <el-select v-model="searchForm.isUpload" placeholder="请选择上传状态">
                  <el-option label="未上传" :value="0" />
                  <el-option label="已上传" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button @click="handleRestSearch()">重置</el-button>
                <el-button type="primary" @click="handleSearchBtn()">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-divider />
        <el-table v-loading="loading" :data="tableData">
          <el-table-column prop="area" label="所属区县" width="120" align="center" />
          <el-table-column prop="repairName" label="企业名称" width="320" align="center" />
          <el-table-column prop="number" label="上传数量" width="120" align="center" />
          <el-table-column prop="phone" label="联系方式" width="120" align="center" />
          <el-table-column prop="address" label="地址" header-align="center" />
        </el-table>
        <el-pagination class="flex justify-center mt-2" background layout="total,prev, pager, next"
          :current-page="currentPage" :page-size="limit" :total="total" @current-change="handleGetTableList" />
      </div>
    </form-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import dayjs from "dayjs";
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import usePermission from "@/hooks/usePermission";
import FormDialog from "@/components/FormDialog.vue";
import { getRepairUploadRecordApi, getRepairIsUploadRInfoApi } from "@/api/repair";
import { getAreaListApi } from "@/api/user";

// 昨天日期
const yesterday = dayjs().subtract(1, "day").format("YYYY-MM-DD");
// 权限
const { hasPermission } = usePermission();
// 区县管理
const isAreaAdmin = computed(() => {
  return hasPermission("home:area");
});
// 表格
const {
  tableData,
  searchForm,
  currentPage,
  limit,
  total,
  loading,
  handleRestSearch,
  handleGetTableList
} = useInitTable({
  searchForm: {
    areaCode: "",
    isUpload: 0,
    time: [yesterday, yesterday]
  },
  getTableList: getRepairUploadRecordApi,
  isNotRefresh: true
});
const { formDrawerRef, handleCreate } = useInitForm({});
// 查看详情按钮
const handleViewDetailBtn = () => {
  handleSearchBtn();
  handleCreate();
};
// 查询-按钮
const handleSearchBtn = () => {
  searchForm.startTime = searchForm.time[0];
  searchForm.endTime = searchForm.time[1];
  handleGetTableList();
};

const yesterdayInfo: any = ref({});
const handleGetYesterday = async () => {
  const res = await getRepairIsUploadRInfoApi();
  yesterdayInfo.value = res;
};
onMounted(() => {
  if (isAreaAdmin.value) {
    handleGetYesterday();
  }
});
</script>
<style scoped lang="scss">
.box {
  position: relative;
  width: 40%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  transition: 0.7s;

  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);

  &-1 {
    background-image: linear-gradient(to right, #7cf246, #26f706);
  }

  &-2 {
    background-image: linear-gradient(to right, #ff7979, #f50707);
  }

  &:hover {
    margin-top: -10px;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;

    &::after {
      /* 过渡效果只能再鼠标放上去生效 不然鼠标离开也会有效果 */
      transition: 1s ease-in-out;
      transform: rotate(-45deg) translate(0, 300px);
    }
  }

  &::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 500px;
    height: 100px;
    background-image: linear-gradient(0deg,
        rgba(0, 0, 0, 0),
        rgba(255, 255, 255, 0.3),
        rgba(0, 0, 0, 0));
    transform-origin: center bottom;
    transform: translate(-250px, -100px) rotate(-45deg);
  }
}

.dialog-body {
  height: calc(100vh - 140px);
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
